<template>
    <div class="todo-footer">
        <label>
            <input type="checkbox" v-model="allStatus" @change="changeAll" />
        </label>
        <span>
            <span>已完成{{ jisuan.finshCount }}</span> / 全部{{ jisuan.count }}
        </span>
        <button class="btn btn-danger">清除已完成任务</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            infoList: [],
            allStatus: false//全选状态
        };
    },
    computed: {
        jisuan() {
            // 求已完成任务 总任务
            let count = this.infoList.reduce((prev, item, index) => {
                // 已完成
                if (item.status) { prev.finshCount += 1 }
                prev.count += 1
                return prev
            }, { finshCount: 0, count: 0 })

            return count
        }
    },
    mounted() {
        // 监听兄弟组件list传递任务数据
        this.$BUS.$on('footerData', (data) => {
            // 监听兄弟组件list传递任务数据
            this.$BUS.$on('footerData', (data) => {
                this.infoList = data
            })
            // 同步全选状态
            this.allStatus = data.every(item => item.status)
        })
    },
    methods: {
        // 全选/反选
        changeAll() {
            // 1.同步自身状态
            // 2.同步每一条任务数据的状态
            // this.infoList.forEach(item => item.status = this.allStatus)

            this.$BUS.$emit('changeAllStatus', this.allStatus)
        }
    },
};
</script>

<style scoped>
/*footer*/
.todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
}

.todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
}

.todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
}

.todo-footer button {
    float: right;
    margin-top: 5px;
}
</style>
